<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta content="IE=8" http-equiv="X-UA-Compatible" />
    <title>{%page_title_index}</title>
    {$QPath}
    <link rel="stylesheet" type="text/css" href="__TMPL__../Admin/Public/base.css" />
    <script type="text/javascript" src="__TMPL__../Admin/Public/jquery.js"></script>
    <script type="text/javascript" src="__TMPL__../Admin/Public/base.js"></script>
    <style type="text/css">
        .toggleColor a{
            padding-right:8px;
        }
        .toggleColor td{
            font-size:13px;
            border:0;
            height:18px;
            line-height:18px;
        }
        td.st{text-indent:0;}
        .st img{
            float:left;
            width:18px;
            height:18px;
        }
        .st img.minus,.st img.plus{
            cursor:default;
        }
    </style>
</head>
<body>
   <div id="container">
       <table class="tabmenu" cellspacing="0">
            <tbody>
                <tr>
                    <td style="width:12px">&nbsp;</td>
                    <td class="here" style="width:80px"><a href="__URL__/index"><span>{%page_title_index}</span></a></td>
                    <td style="width:80px;"><a href="__URL__/add"><span>{%page_title_add}</span></a></td>
                    <td>&nbsp;</td>
                </tr>
            </tbody>
        </table>
        <div class="main">
            <div class="operate">
                <ul class="fnc">
                    <li><button type="button" class="btn" onclick="doAction('sort')"><span><span>{%page_title_sort}</span></span></button></li>
                </ul>
            </div>
            <div class="view">
                <form method="post" action="__URL__">
                <table class="data">
                    <thead>
                        <tr>
                            <th>{%category_name}</th>
                            <th style="width:240px">{%operate}</th>
                        </tr>
                    </thead>
                    <tbody class="toggleColor" id="tree">
                    <iterate name="allCategorys" id="vo">
                    <tr _level="{$vo['level']}" _lft="{$vo['lft']}" _rgt="{$vo['rgt']}">
                            <td class="st">{$vo['name']}</td>
                            <td>
                                <a href="javascript:addChildCategory({$vo['id']})">{%add_sub_category}</a>
                                <a href="javascript:alterCategory({$vo['id']})">{%edit}</a>
                                <a href="javascript:moveCategory({$vo['id']})">{%move}</a>
                                <a href="javascript:removeCategory({$vo['id']})">{%removal}</a>
                            </td>
                        </tr>
                    </iterate>
                </table>
                </form>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">
    function doAction(operate){
        if(operate=='save'){

        }
        $("form").attr("action","__URL__/"+operate).submit();
    }

    var imgBasePath="__TMPL__../Admin/Public/img/tree/";
    var blank=imgBasePath+"blank.gif";
    var minus010=imgBasePath+"minus010.gif";
    var minus110=imgBasePath+"minus110.gif";
    var minus111=imgBasePath+"minus111.gif";
    var plus111=imgBasePath+"plus111.gif";
    var plus110=imgBasePath+"plus110.gif";
    var line101=imgBasePath+"line101.gif";
    var line111=imgBasePath+"line111.gif";
    var line110=imgBasePath+"line110.gif";

    var blankImgStr={};
    blankImgStr["p0"]="";
    blankImgStr["p1"]="";
    blankImgStr["p2"]="<img src=\""+blank+"\"/>";

    var stack=[];
    var p={};

    //TODO 直接在页面载入时生成树状表格，而不是页面载入后再生成，使页面通过W3C验证
    $(function(){
        //对表格进行处理，实现树状结构----还要进一步的优化
        var trs=document.getElementById("tree").getElementsByTagName("tr");
        var len=trs.length,maxRgt=len*2-1;
        for(var i=0;i<len;i++){
            var tr=trs[i];
            var td=$(tr.getElementsByTagName("td")[0]);
            var c={};
            c.level=parseInt(tr.getAttribute("_level"));
            c.lft=parseInt(tr.getAttribute("_lft"));
            c.rgt=parseInt(tr.getAttribute("_rgt"));
            c.count=(c.rgt-c.lft-1)/2;
            if(c.level==0){
                $("<img/>").attr("src",minus010).prependTo(td);
                stack.push(c);
                p=c;
            }else{
                //检查是否要出栈
                if(c.level==p.level) stack.pop();
                if(c.level>1) tr.style.display="none";
                var $img=null;
                if(c.lft+1==c.rgt){         //没有子节点了
                    if(c.rgt+1==p.rgt){     //是本级别中的最后一个节点
                        $img=$("<img/>").attr({src:line110});
                    }else{
                        $img=$("<img/>").attr({src:line111});
                    }
                }else{                      //包含有子节点
                    stack.push(c);
                    p=stack[c.level-1];
                    if(c.rgt+1==p.rgt){     //本级别的最后一个节点
                        $img=$("<img class='plus' _src='110' />").attr("src",plus110);
                    }else{
                        $img=$("<img class='plus' _src='111' />").attr("src",plus111);
                    }
                    p=c;
                }
                $img.prependTo(td).click(function(){
                    var next=this.parentNode.parentNode;
                    var c=this.className;
                    var p="";   //IE6下不支持tale-row，故用此代替
                    if(c=="minus"){
                        this.className="plus";
                        p="none";
                        this.src=(this.getAttribute("_src")=="110")?plus110:plus111;
                    }else{
                        this.className="minus";
                        this.src=(this.getAttribute("_src")=="110")?minus110:minus111;
                    }
                    var level=parseInt(next.getAttribute("_level"));
                    while(true){
                        next=next.nextSibling;
                        if(!next) break;
                        if(next.nodeType==1){
                            var nlevel=parseInt(next.getAttribute("_level"));
                            if(nlevel==level+1){
                                next.style.display=p;
                            }else if(nlevel==level){
                                break;
                            }
                        }
                    }
                });
                var key="p"+c.level;
                if( ! ( key in blankImgStr ) ){
                    blankImgStr[key]=blankImgStr["p1"]+blankImgStr["p"+(level-1)];
                }
                if(c.level>1 && p.rgt<maxRgt){
                    $(blankImgStr[key]+"<img src=\""+line101+"\"/>").prependTo(td);
                }else{
                    $("<img src=\""+blank+"\"/>"+blankImgStr[key]+"").prependTo(td);
                }
            }

        }
    });
</script>
</html>
